<template>
	<u-button @click='click' :throttle-time='throttleTime' :shape="circle ? 'circle' : 'square'" :custom-style="customStyle">{{title}}</u-button>
</template>

<script>
	export default{
		props:{
			title: {
				type: String,
				default: '按钮'
			},
			backgroundColor:{
				type: String,
				default: '#FC5E53'
			},
			color:{
				type: String,
				default: '#FFFFFF'
			},
			fontSize:{
				type: [String, Number],
				default: '28'
			},
			width:{
				type: [String, Number],
				default: ''
			},
			height:{
				type: [String, Number],
				default: 80
			},
			circle:{
				type: Boolean,
				default: false
			},
			marginLeft:{
				type: [String, Number],
				default: 0
			},
			marginRight:{
				type: [String, Number],
				default: 0
			},
			throttleTime:{
				type: Number,
				default: 500
			},
		},
		data() {
			return {
				customStyle:{
					backgroundColor: this.backgroundColor,
					color: this.color,
					fontSize: this.fontSize + 'rpx',
					width: this.width + 'rpx',
					height: this.height + 'rpx',
					marginLeft: this.marginLeft + 'rpx',
					marginRight: this.marginRight + 'rpx',
				}
			}
		},
		methods:{
			click(){
				this.$emit('click')
			},
		},
	}
</script>

<style lang="scss" scoped>
</style>
